<template>
	<div class="settings-container">
		<h2 class="settings-title">设置</h2>
		<div class="settings-group">
			<h3 class="settings-group-title">主题</h3>
			<div class="theme-selector">
				<button 
					v-for="theme in themes" 
					:key="theme.value" 
					@click="changeTheme(theme.value)"
					:class="['theme-button', { active: currentTheme === theme.value }]"
				>
					{{ theme.label }}
				</button>
			</div>
		</div>
		<div class="settings-group">
			<h3 class="settings-group-title">语言</h3>
			<select v-model="selectedLanguage" @change="changeLanguage" class="language-select">
				<option v-for="lang in languages" :key="lang.value" :value="lang.value">
					{{ lang.label }}
				</option>
			</select>
		</div>
		<div class="settings-group">
			<h3 class="settings-group-title">其他设置</h3>
			<label class="setting-item">
				<input type="checkbox" v-model="notifications" @change="toggleNotifications">
				启用通知
			</label>
			<label class="setting-item">
				<input type="checkbox" v-model="soundEffects" @change="toggleSoundEffects">
				启用音效
			</label>
		</div>
	</div>
</template>

<script setup>
import { ref } from 'vue';

const currentTheme = ref('light');
const selectedLanguage = ref('zh');
const notifications = ref(true);
const soundEffects = ref(true);

const themes = [
	{ value: 'light', label: '浅色' },
	{ value: 'dark', label: '深色' },
];

const languages = [
	{ value: 'zh', label: '中文' },
	{ value: 'en', label: '粤语' },
];

const changeTheme = (theme) => {
	currentTheme.value = theme;
};

const changeLanguage = () => {
};

const toggleNotifications = () => {
};

const toggleSoundEffects = () => {
};
</script>

<style scoped>
	.settings-container {
		max-width: 600px;
		margin: 0 auto;
		padding: 20px;
		background-color: var(--settings-bg);
		border-radius: 10px;
		box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
	}

	.settings-title {
		font-size: 24px;
		color: var(--settings-title);
		margin-bottom: 20px;
		text-align: center;
	}

	.settings-group {
		margin-bottom: 30px;
	}

	.settings-group-title {
		font-size: 18px;
		color: var(--settings-group-title);
		margin-bottom: 15px;
		border-bottom: 1px solid var(--settings-border);
		padding-bottom: 5px;
	}

	.theme-selector {
		display: flex;
		justify-content: space-between;
		margin-bottom: 15px;
	}

	.theme-button {
		padding: 10px 20px;
		border: none;
		border-radius: 5px;
		background-color: var(--theme-button-bg);
		color: var(--theme-button-text);
		cursor: pointer;
		transition: all 0.3s ease;
	}

	.theme-button.active {
		background-color: var(--theme-button-active-bg);
		color: var(--theme-button-active-text);
	}

	.language-select {
		width: 100%;
		padding: 10px;
		border-radius: 5px;
		border: 1px solid var(--settings-border);
		background-color: var(--settings-input-bg);
		color: var(--settings-input-text);
	}

	.setting-item {
		display: flex;
		align-items: center;
		margin-bottom: 10px;
		color: var(--settings-text);
	}

	.setting-item input[type="checkbox"] {
		margin-right: 10px;
	}
</style>